<script lang="ts" setup >
import { useRouter } from 'vue-router';
import { ref, onMounted, type Ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { getGameChart, getGameChart2 } from '@/api/user';
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
let arr: Ref<any[]> = ref([])
let arr2: Ref<any[]> = ref([])
let router = useRouter()

onMounted(() => {
    getGameChart().then(res => {
        arr.value = res.data
    })
    getGameChart2().then(res => {
        arr2.value = res.data
    })
})

function goset() {
    console.log(1111111);
    router.push('/set')
}
</script>
<template>
    <div style="width: 100%;height: 100%;">
        <img style="height: 90%;width: 100%;position: absolute;z-index: -1;filter: brightness(0.7);"
            src="../../assets/img/sp.jpg" alt="">
        <div style="color: white;text-align: center;">
            <el-button
                style="font-size: 17px;position: fixed;z-index: 111;right: 10px;top: 60px; color:white;border: 0; background-color: rgba(0, 0, 0, 0);"
                @click="goset">设置</el-button>
            <div style="width: 90px;height: 0px;margin-top: 0px;"></div><img
                style="width:90px;height: 90px;margin-top: 30px;"
                src="https://cdn7.axureshop.com/demo2024/2319582/images/%E6%88%91%E7%9A%84/u816.png" alt="">
            <div style="font-size: 25px;margin-bottom: 7px;"><b>不忘初心</b></div>
            <div>ID</div>
            <div style="width: 100%;height: 40%;margin-top: 25px;">
                <div style="margin-bottom: 10px;display: flex;justify-content: space-around;">
                    <div>
                        <div style="margin-bottom: 7px;">20</div>
                        <div>关注</div>
                    </div>
                    <div>
                        <div style="margin-bottom: 7px;">12</div>
                        <div>点赞</div>
                    </div>
                    <div>
                        <div style="margin-bottom: 7px;">2</div>
                        <div>收藏</div>
                    </div>
                    <div style="width: 30%;height: 45px;">
                        <el-button style="width: 100%;height: 100%;" color="#444"
                            @click="router.push('/edit')">编辑资料</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;background-color: #ffffff;border-top-right-radius: 10px;border-top-left-radius: 10px;">
            <el-tabs stretch v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="游戏数据" name="first">
                    <div style=" color: #000; padding:0px 10px;">
                        <div style="display: flex;justify-content: space-between;">
                            <div><b>游戏榜</b></div>
                            <div>查看更多 ></div>
                        </div>
                        <div style="width: 100%;margin: 10px 0;display: flex;justify-content: space-between;">
                            <el-image style="width: 30%;border-radius: 8%;" v-for="item in arr" :src="item.img"
                                alt=""></el-image>
                        </div>
                        <div style="">
                            <div><b>心愿墙</b></div>
                            <div></div>
                        </div>
                        <div
                            style="width: 100%;margin: 10px 0;display: flex;justify-content: space-between;margin-bottom: 100px;">
                            <el-image style="width: 30%;border-radius: 8%;" v-for="item in arr2" :src="item.img"
                                alt=""></el-image>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我的动态" name="second">
                    <div style=" color: #000; padding:0px 10px;">
                        <div style="display: flex;justify-content: space-between;">
                            <div><b>游戏推荐</b></div>
                            <div>查看更多 ></div>
                        </div>
                        <div style="width: 100%;margin: 10px 0;display: flex;justify-content: space-between;">
                            <el-image style="width: 30%;border-radius: 8%;" v-for="item in arr2" :src="item.img"
                                alt=""></el-image>
                        </div>
                        <div style="">
                            <div><b>好玩的游戏</b></div>
                            <div></div>
                        </div>
                        <div 
                            style="width: 100%;margin: 10px 0;display: flex;justify-content: space-between;margin-bottom: 100px;">
                            <el-image style="width: 30%;border-radius: 8%;" v-for="item in arr" :src="item.img"
                                alt=""></el-image>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template> 
<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>